import { defineComponent, computed, unref } from 'vue';
import type { ConfigProviderThemeVars } from 'vant';
import './Title.less';
import { ConfigProvider } from 'vant';
import { NavBar } from 'vant';
import setting from '/@/settings/projectSetting';

export default defineComponent({
  name: 'VerseTitle',
  props: {
    title: {
      type: String as PropType<string>,
      default: () => {
        return '';
      },
    },
    logo: {
      type: String as PropType<string>,
      default: () => {
        return '';
      },
    },
    leftArrow: {
      type: Boolean as PropType<boolean>,
      default: () => {
        return false;
      },
    },
  },
  emits: ['leftClick'],
  setup(props, { emit }) {
    const themeVars: ConfigProviderThemeVars = {
      navBarIconColor: '#040404',
      navBarTitleTextColor: '#040404',
    };

    const titleSlot = {
      title: () => {
        const { logo, title } = props;
        if (logo) {
          return <img src={logo} alt='' class={'h-75px w-auto'} />;
        }
        return title;
      },
    };

    const minMargin = computed(() => {
      const { leftArrow } = props;
      return leftArrow ? '' : 'min-margin';
    });

    return () => (
      <div class={`general-page-title ${unref(minMargin)}`} style={{ zIndex: setting.PageTitleZIndex }}>
        <ConfigProvider themeVars={themeVars}>
          <NavBar
            v-slots={titleSlot}
            leftArrow={props.leftArrow}
            onClickLeft={() => {
              emit('leftClick');
            }}
          />
        </ConfigProvider>
      </div>
    );
  },
});
